<template>
  <div>
    <uploader
      ref="uploader"
      browse_button="browse_button"
      :url="server_config.url+'/File/file2'"
      :filters="{prevent_duplicates:true,mime_types:[{title:'pdf',extensions:'pdf'}]}"
      @inputUploader="inputUploader"
    />
    <el-tag type="warning">只允许上传票据的pdf文件</el-tag>
    <br/>
    <br/>
    <el-button type="warring" id="browse_button">批量选择</el-button>
    <br/>
    <el-table
      :data="tableData"
      style="width: 100%; margin: 10px 10px;min-width: 1100px">
      <el-table-column
        label="文件名">
        <template slot-scope="scope">
          <span>{{scope.row.filename}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1">准备上传</span>
          <span v-if="scope.row.status === 4" style="color: brown">解析失败</span>
          <span v-if="scope.row.status === 5" style="color: darkgreen">解析成功</span>
          <span v-if="scope.row.status === 2" style="color: lightsteelblue">解析中...</span>

          <!--<el-progress v-if="scope.row.status === 2" :text-inside="true" :stroke-width="20" :percentage="scope.row.percent">解析中...</el-progress>
        -->
        </template>
      </el-table-column>
      <el-table-column
        label="发票代码">
        <template slot-scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发票号码">
        <template slot-scope="scope">
          <span>{{scope.row.num}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="开票日期">
        <template slot-scope="scope">
          <span>{{scope.row.time}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="校验码后6位">
        <template slot-scope="scope">
          <span>{{scope.row.check}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="开票方名称">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="金额">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="税额">
        <template slot-scope="scope">
          <span>{{scope.row.tax}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="合计">
        <template slot-scope="scope">
          <span>{{scope.row.sum}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="deleteFile(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br/>
    <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="up.start()">批量上传</el-button>
      </el-col>
      <el-col :span="12">
        <el-button style="float: right" type="success" @click="getXlsUrl(server_config.url+'/File/download/')">下载xls</el-button>
      </el-col>
    </el-row>
    <br/><br/>


    <div align="center">
      <div align="center" style="color: #6f7180;font-weight:900;font-size: 20px;">票据样例</div>
    <img :src="picUrl" width="600px"/>
    </div>
  </div>
</template>

<script>
import Uploader from './Uploader'
import axios from 'axios'
export default {
  name: "NonTaxInvoice",
  data() {
    return {
      picUrl:'/static/sample2.png',
      files: [],
      showbar:false,
      up: {},
      server_config: this.global.server_config,
      tableData: [],
      filterUrl:'#'
    }
  },
  watch: {
    files: {
      handler() {
        this.tableData = [];
        this.files.forEach((e) => {
          this.tableData.push({
            filename: e.name,
            status: e.status,
            id: e.id,
            percent: e.percent,
            code:  e.data?e.data.code:'',
            num: e.data?e.data.num:'',
            name: e.data?e.data.name:'',
            price: e.data?e.data.price:'',
            tax: e.data?e.data.tax:'',
            sum: e.data?e.data.sum:'',
            check: e.data?e.data.check:'',
            time: e.data?e.data.time:''
          });
        });
      },
      deep: true
    }
  },
  methods: {

    inputUploader(up) {
      this.up = up;
      this.files = up.files;
    },
    deleteFile(id) {
      let file = this.up.getFile(id);
      this.up.removeFile(file);
    },
    getXlsUrl(api){
      var datas = [];
      for(var i=0;i<this.tableData.length;i++){
        if(this.tableData[i].status==5){
          var data = {
            code:  this.tableData[i].code,
            num: this.tableData[i].num,
            name: this.tableData[i].name,
            price: this.tableData[i].price,
            tax: this.tableData[i].tax,
            sum: this.tableData[i].sum,
            check: this.tableData[i].check,
            time: this.tableData[i].time,
            filename:this.tableData[i].filename
          };
          datas.push(data);
        }
      }
      if(datas.length>0) {
        axios.post(api, datas).then((response) => {
          var filterUrl = response.data.data;
          const a = document.createElement('a');
          a.target = "_blank";
          a.href = filterUrl;
          a.click();
          console.log(response)
        })
      }else{
        alert('内容为空！');
      }
    }
  },
  components: {
    'uploader': Uploader
  }
}
</script>

<style scoped>
</style>
